<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('模板示例')" />
	<th:block th:include="include::bootstrap-select-css" />
</head>

<body>

	<body class="gray-bg">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse">
					<textarea readonly id="templateContent" class="form-control" style="width: 40%;" rows="20">


					  </textarea>
				</div>
				<div class="col-sm-12 select-table table-striped">
					<div class="row">
						<div class="col-sm-4">
							<form class="form-horizontal m" id="json-form">
								<div id="json-div">

								</div>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="submit()"><i
										class="fa fa-search"></i>确定</a>
							</form>
						</div>
						<div class="col-sm-8">
							<div id="show-exm" style="border: none;width: 100%">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include::bootstrap-select-js" />
		<script th:inline="javascript">
			var prefix = ctx + "oly/template";
			//使用的模板id
			var templateId = [[${ templateId }]];
			function initForme() {
				$.get(prefix + "/get/" + templateId, function (data, status) {
					$("#json-div").empty();
					getContent(data.data.templateUrl);
					$.each(JSON.parse(data.data.templateParam), function (i, e) {//i是索引，e是json对象
						if (e == null) {
							return;
						}
						//根据json生成表单
						var df = '<div class="form-group">' +
							'<label class="col-sm-3 control-label is-required">' + e + '</label>' +
							'<div class="col-sm-8">' +
							'<input class="form-control" type="text" name="' + i + '" >' +
							'</div>' +
							'</div>';
						$("#json-div").append(df);
					});
				});
			}
			function getContent(templateUrl) {
				$.get(prefix + "/getContent?templateUrl=" + templateUrl, function (res, status) {
					$("#templateContent").val(res);
				});
			}
			initForme();
			function submit() {
				var formData = $("#json-form").serializeArray();

				formData.push({ "name": "content", "value": $("#templateContent").val()});
				var formData1 = new FormData();
				for (var p in formData) {
					formData1.append(formData[p].name, formData[p].value);
				}
				  $.get(prefix + "/example", formData, function (res) {
					$("#show-exm").empty();
					$("#show-exm").append(res);

            })
			
			}
		</script>
	</body>

</html>